<template>
	<div class="cartcontroll">
		<span class="cartbutton button-minus" v-if="food.count > 0" @click.stop="decreaseCount">
			<i class="fa fa-minus"></i>
		</span>
		<span class="cartcount" v-if="food.count > 0">{{food.count}}</span>
		<span class="cartbutton" @click.stop="increaseCount">
			<i class="fa fa-plus-circle"></i>
		</span>
	</div>
</template>

<script>
export default {
	props: {
		food: Object
	},
	methods: {
		decreaseCount() {
			this.food.count--
		},

		increaseCount() {
			this.food.count++
		}
	}
}
</script>

<style scoped>
.cartcontroll {
  display: inline-flex;
  align-items: center;
}
.cartbutton {
  display: inline-block;
  vertical-align: middle;
}
.cartbutton i {
  color: rgb(35, 149, 255);
  vertical-align: middle;
  font-size: 1.5rem;
}
.button-minus {
  width: 4.866667vw;
  height: 4.866667vw;
  border: 1px solid rgb(35, 149, 255);
  border-radius: 50%;
  text-align: center;
}
.button-minus i {
  font-size: 1rem;
}
.cartcount {
  display: inline-block;
  text-align: center;
  color: rgba(0, 0, 0, 0.87);
  vertical-align: middle;
  font-size: 0.8rem;
  width: 6.933333vw;
  overflow: hidden;
}
</style>